<template>
  <div class="m-menu-con">
      <template v-for="menu in menus">
          <poem-menu-item v-if="!menu.childrenMenu||!menu.childrenMenu.length" :level="nextLevel" :name="menu.id">
              <Icon :type="menu.icon"></Icon>
              {{menu.menuName}}
          </Poem-menu-item>

          <poem-sub-menu :name="menu.id" :level="nextLevel" v-else>
              <Icon slot="icon" :type="menu.icon"></Icon>
              <span slot="title">{{menu.menuName}}</span>
              <poem-menu-iterator :menus="menu.childrenMenu" :level="nextLevel"></poem-menu-iterator>
          </poem-sub-menu>
      </template>
  </div>
</template>
<script>

  import PoemMenuItem from './PoemMenuItem.vue'
  import PoemSubMenu from './PoemSubMenu.vue'
  export default{
    name: 'PoemMenuIterator',
    props:{
      menus:{
        type:Array
      },
      level: {
        type: Number,
        default: 1
      },
    },
    components: {
      PoemMenuItem,
      PoemSubMenu
    },
    computed:{
      nextLevel () {
        return this.level + 1;
      }
    }
  }
</script>
